<template>
	<div class="mobile_home">
			<div class="banner">
			<el-carousel :interval="5000" arrow="nerver" height="12rem">
				<el-carousel-item v-for="item in bannerlist" :key="item.id">
					<img :src="`http://127.0.0.1/api/public/showimg/${item.picture}`" />
				</el-carousel-item>
			</el-carousel>
		</div>

		<!-- 移动端界面首页 -->
		<!-- 传递的数据如果是固定的字符串，那么不需要v-bind指令 -->
		<MobileHomeList proptitle="热门推荐" :proplist='hotlist'></MobileHomeList>
		<MobileHomeList proptitle="新书上市" :proplist='newslist' style="margin-bottom: 2.5rem;"></MobileHomeList>
	</div>
</template>

<script>
	import MobileHomeList from '@/components/mobile/home/MobileHomeList.vue';
	export default {
		name: 'MobileHome',
		components: {
			MobileHomeList,
		},
		data() {
			return {
				hotlist: [],
				newslist: [],
				bannerlist: [],
			}
		},
		methods: {
			// 显示轮播图片
			showPic() {
				this.$axios.get("http://127.0.0.1:80/api/public/findHot/1/4")
					.then((resp) => {
						console.log(resp.data);
						console.log(resp.data.data);
						this.bannerlist = resp.data.data;
					})
			},

		},
		mounted() {
			this.showPic();
			//热门推荐：显示销量最高的前几本书
			this.$axios.get("http://127.0.0.1/api/public/book/findTopSale/4")
				.then((resp) => {
					console.log(resp.data);
					this.hotlist = resp.data.data;
				});

			// 新书上市  按类型分页查找书本  typeid = 0 时， 表示查找全部类型
			this.$axios.get("http://127.0.0.1/api/public/findPageBook/2/6/0")
				.then((resp) => {
					console.log(resp.data.data);
					this.newslist = resp.data.data.books;
				})
		},
		computed: {
			HotBanner() {
				this.bannerlist.sort((a1, a2) => {
					return a2.hot - a1.hot
				})
				//forEach / for...in / for...of : 都是可以再需要限制输出的数据数量模块使用
				//map : 基本确定不会更改数组的长度,只不过数据的内容发生格式化的改变
				let arr = [];
				this.bannerlist.forEach((item, i) => {
					if (i < 4) {
						arr.push(item)
					}
				})
				return arr;
			}
		}
	}
</script>

<style scoped>
	.mobile_home {
		background-color: #242a38;
		position: relative;
		top: 56px;
	}

	.banner {
		width: 100%;
		height: 12rem;
		margin-bottom: 1.5rem;
	}
	
	.banner img {
		margin-top: 0.8rem;
		width: 100%;
		height: 100%;
	}

	/* 穿刺,把样式穿刺到最底层,css用户修改固定组件样式的操作 */
	.banner .el-carousel /deep/ .el-carousel__button {
		height: 5px !important;
		width: 0.25rem;
		border-radius: 50%;
	}

	/* 轮播滑动条颜色 */
	.banner .el-carousel /deep/ .is-active .el-carousel__button {
		background-color: #5d6d91 !important;
	}
</style>

